<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电影售票后台管理</title>
	<link rel="icon" href="https://tse3-mm.cn.bing.net/th/id/OIP-C.KqMcdHDdhj7my7owygzC4wHaGL?w=239&h=200&c=7&r=0&o=5&dpr=1.3&pid=1.7" type="image/x-icon">
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>

<style>
	*{
		padding: 0;
        margin: 0;
	}
	html, body, #app {
		width: 100%;
		height: 100%;
		font-size: 14px;
	}
	.el-container{
		width: 100%;
		height: 100%;
	}
	.el-header{
		width: 100%;
		padding: 0%;
		background-color: rgba(101, 159, 6, 0.8);
		position: relative;
	}
	.el-header span{
		font-size: 30px;
		font-family: '微软雅黑';
		line-height: 60px;
		padding: 0 80px;
	}
	.el-aside{
		padding: 0%;
		height: 100%;
	}
	.el-menu{
		height: 100%;
	}
	.el-main{
		padding: 0%;
	}
	iframe{
		width: 100%;
        height: 100%;
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		gap: 40px;
	}
	.flex>*{
		margin: 0px;
		padding: 0px;
	}
</style>
</head>
<body>
	<div id="app">

		<el-container>
			<!--头部-->
			<el-header class="flex"><span>电影售票后台管理</span>
				<span>

					<a href="#">欢迎:{{myinfo.name}}</a>

					<a href="/sign/logout">退出</a>
				</span>
			</el-header>
			<el-container>
				<!--左侧列表-->
				<el-aside width="200px">
					<el-menu ref="sidebarMenu" default-active="2" :unique-opened="true" class="el-menu-vertical-demo" @select="toPage"
						background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

<!--						影厅管理-->
						<el-submenu index="1">
							<template slot="title">
								<i class="el-icon-user-solid"></i>
								<span>影厅管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="hall/index">影厅管理</el-menu-item>
							</el-menu-item-group>
						</el-submenu>

<!--						影院管理-->
						<el-submenu index="2">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span slot="title">影院管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="studios">影院管理</el-menu-item>
							</el-menu-item-group>
						</el-submenu>

<!--						电影管理-->
						<el-submenu index="3">
							<template slot="title">
								<i class="el-icon-document"></i>
								<span slot="title">电影管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="fileManage">电影管理</el-menu-item>
							</el-menu-item-group>
						</el-submenu>

<!--						排片管理-->
						<el-submenu index="4">
							<template slot="title">
								<i class="el-icon-setting"></i>
								<span slot="title">排片管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="scheduleManage">排片管理</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-aside>
				<!--内容部-->
				<el-main>
					<iframe :src="url"></iframe>
				</el-main>
			</el-container>
		</el-container>
		
		</div>
	
<script>
	let app = new Vue({
		el: '#app',
		data: {
			url: 'welcome.html',
			myinfo:{}
		},
		methods: {
			// 切换界面方法
			//需要去上方index里面添加html文件名，不需要.html后缀
			toPage(page){
				this.url = page + '.html';
			},
			getMyinfo(){
				axios.get("../sign/myinfo").then(res=>{
					this.myinfo = res.data.data;
				});
			},
		},
		created(){
			this.getMyinfo();
		}
	});
</script>
</body>
</html>